<div class="p-side-navigation {% if is_sticky %}is-sticky{% endif %}" id="drawer">
  <button class="p-side-navigation__toggle js-drawer-toggle" aria-controls="drawer">
    Toggle side navigation
  </button>

  <div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="drawer"></div>

  <nav class="p-side-navigation__drawer" aria-label="Example side">
    <div class="p-side-navigation__drawer-header">
      <button class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="drawer">
        Toggle side navigation
      </button>
    </div>

    <h3 class="p-side-navigation__heading">Introduction</h3>
    <ul class="p-side-navigation__list">
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">About MAAS</a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">Explore MAAS</a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">Quick start<span class="p-side-navigation__status">
          <span class="p-chip--positive is-readonly is-inline is-dense">New</span>
        </span></a>
      </li>
    </ul>
    <h3 class="p-side-navigation__heading">Machines</h3>
    <ul class="p-side-navigation__list">
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">Commission machines</a>
      </li>
      <li class="p-side-navigation__item">
        <span class="p-side-navigation__text">Testing</span>
        <ul class="p-side-navigation__list">
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Hardware testings</a>
          </li>
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Network testing</a>
          </li>
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" aria-current="page" href="#">Commissioning and hardware testing scripts</a>
          </li>
        </ul>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">Deploy machines</a>
      </li>
    </ul>
    <ul class="p-side-navigation__list">
      <li class="p-side-navigation__item--title">
        <a class="p-side-navigation__link">Concepts & terms</a>
      </li>
    </ul>
    <h3 class="p-side-navigation__heading--linked"><a class="p-side-navigation__link">Troubleshoot</a></h3>
    <ul class="p-side-navigation__list">
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">Getting help</a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">MAAS 2.5 (and earlier) documentation</a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">Upgrading MAAS</a>
        <ul class="p-side-navigation__list">
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Upgrade from 2.3 to 2.4</a>
          </li>
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Upgrade from 1.9 to 2.x<span class="p-side-navigation__status"><i class="p-icon--warning"></i></span></a>
          </li>
        </ul>
      </li>
    </ul>

  </nav>
</div>
